<template>
  <div class="dispatcher">
    <div class="dp-l">
      <h2>Cluster</h2>
      <div style="text-align: center; margin:40px" v-if="!cluster">
        <n-spin size="large"/>
      </div>
      <Cluter
          v-for="item in cluster"
          :data="item" :key="item.id"
          :class="item.id === selectCluster?'cluster cluster_select':'cluster'"
          @click="getDPUrl(`${item.cluster_info.host}:${item.cluster_info.dashboard_port}`, item.id)"
      ></Cluter>
      <n-button size="large" class="new-btn" @click="showNewModal = true">+ New</n-button>
      <n-modal v-model:show="showNewModal">
        <New/>
      </n-modal>
    </div>
    <div class="dp-r">
      <PageTitle :title="'Ray Dashboard'">
        <template v-slot:operate>
          <n-button-group>
            <n-button round size="large" @click="showUploadModal = true">
              <Upload theme="outline" size="24" fill="#333" :strokeWidth="3"/>
            </n-button>
            <n-modal v-model:show="showUploadModal">
              <UploadModal/>
            </n-modal>
            <n-button round size="large" @click="showSettingModal = true">
              <Setting theme="outline" size="24" fill="#333" :strokeWidth="3"/>
            </n-button>
            <n-modal v-model:show="showSettingModal">
              <SettingModal/>
            </n-modal>
          </n-button-group>
        </template>
      </PageTitle>
      <div class="dp-r--main" v-if="cluster">
        <iframe :src="`http://${clusterUrl}`" border="0" frameborder="no" framespacing="0" allowfullscreen="true"
                style="width: 100%;height: 100%;"
        > </iframe>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import { Upload, Setting } from '@icon-park/vue-next'
import { NButtonGroup, NButton, NModal, NSpin } from 'naive-ui'
import PageTitle from '@/components/PageTitle'
import Cluter from '@/components/modelD/dispatcher/Cluster'
import New from '@/components/modelD/dispatcher/New'
import SettingModal from '@/components/modelD/dispatcher/Setting'
import UploadModal from '@/components/modelD/dispatcher/Upload'
import fiatBE from "@/api/fiatBE";

let showNewModal = ref(false)
let showSettingModal = ref(false)
let showUploadModal = ref(false)

let cluster = ref(null)
let selectCluster = ref(null)
let clusterUrl = ref(null)

function getDPUrl(url, id) {
  clusterUrl.value = url
  selectCluster.value = id
}

onMounted(() => {
  fiatBE.get('/cluster/fetch').then(res => {
    cluster.value = res.data
    selectCluster.value = res.data[0].id
    clusterUrl.value = `${res.data[0].cluster_info.host}:${res.data[0].cluster_info.dashboard_port}`
  })
})

</script>

<style scoped>
.dispatcher {
  display: flex;
  align-items: flex-start;
}
.dp-l h2 {
  font-size: var(--settingTitleFontSize);
  margin-top: 0;
}
.dp-l{
  width: 20%;
  margin-right: 4%;
}
.new-btn {
  display: block;
  width: 85px;
  margin: 0 auto;
}
.dp-r {
  flex: 1;
}
.dp-r--main {
  margin-top: 20px;
  border-radius: 10px;
  border: 1px solid black;
  height: 70vh;
}
.cluster:hover {
  cursor: pointer;
}
.cluster_select {
  border: 2px solid rgb(102,26,230) !important;
}
</style>
